<template>
  <div class="test-box">
    <h1>自定义的test.vue---{{username}}</h1>
    <button @click="changeName">修改用户名</button>
  </div>
</template>

<script>
//默认导出，这是固定写法！
  export default {
    //data:数据源
    //注意：.vue组件中的data不能指向对象
    //注意：组件中的data必须是一个函数
    data() {
      //这个return出去的{}中，可以定义数据
      return {
        username: 'admin'
        }
      },
    methods: {
      changeName(){
        //this:当前组件
        this.username = '哇哈哈'
      }
    },
    //当前组件的侦听器
    watch: {

    },
    //当前组件的计算属性
    computed: {

    },
    //当前组件的过滤器
    filter: {

    }
  }
</script>

<style lang="less">
.test-box {
  background-color: pink;
  h1 {
    color: red;
  }
}
</style>